<!DOCTYPE html>
<html lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<title>Break inside avoid</title>

		<script src="../../../../../dist/paged.polyfill.js"></script>

		<style>
			@page {
				size: 6in 8in;
				margin: 20mm 20mm;
				/* border: solid 1px black; */
				@bottom-left {
					content: counter(page);
				}
			}

			h1,
			p {
				break-inside: avoid;
			}

			/* style and interface */

			* {
				font-family: Times New Roman, sans-serif;
			}

			:root {
				font-size: 18px;
			}

			section {
				break-before: page;
			}

			p {
				line-height: 22px;
			}

			h1 {
				font-size: 24px;
				margin-top: 0;
				text-transform: uppercase;
			}

			h2,
			h3 {
				font-size: 20px;
				margin-top: 0;
			}
		</style>

		<style media="screen">
			@media screen {
				body {
					background-color: whitesmoke;
				}

				.pagedjs_page {
					background-color: white;
					box-shadow: 0 0 0 1px #bfbfbf;
					margin-top: 10mm;
					margin-left: 10mm;
				}
			}
		</style>
	</head>

	<body>
		<section>
			<p>
				Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex
				malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo
				non diam congue tempor. Ut laoreet, est eget blandit congue, mauris
				magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel
				egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed
				ac pretium magna, ut ultrices tortor.
			</p>
			<h1>
				Cras ut augue condimentum, egestas nisi in, dictum erat. Nullam
				tincidunt tincidunt tempor. Sed in eleifend nibh, sit amet feugiat nisi.
				Cras at ante ut urna sagittis dictum ut nec elit. In feugiat euismod
				massa sagittis dictum. Nullam eu nisl eu elit laoreet tincidunt id sed
				ligula. Praesent vulputate faucibus nibh, ut ultrices nunc aliquam nec.
				Mauris et condimentum ligula. Vestibulum nec tortor quis urna dictum
				luctus. Cras quis suscipit metus. Ut dignissim ullamcorper aliquam.
				Donec condimentum eu tellus at interdum.
			</h1>
			<p>
				Morbi a lacus eget augue sagittis euismod. Aliquam non leo quis dui
				bibendum viverra eu vel erat. Fusce iaculis vulputate leo, sit amet
				laoreet eros aliquam a. Sed id tellus at ligula porttitor pharetra.
				Morbi non fringilla augue. Cras sodales egestas mi, et porta orci
				ultricies sed. Sed et nulla a ligula aliquet accumsan non eleifend quam.
				Aliquam pellentesque, justo vel interdum accumsan, purus ipsum porttitor
				lectus, ac luctus risus lectus nec lectus. Cras ut augue condimentum,
				egestas nisi in, dictum erat. Nullam tincidunt tincidunt tempor. Sed in
				eleifend nibh, sit amet feugiat nisi. Cras at ante ut urna sagittis
				dictum ut nec elit. In feugiat euismod massa sagittis dictum. Nullam eu
				nisl eu elit laoreet tincidunt id sed ligula. Praesent vulputate
				faucibus nibh, ut ultrices nunc aliquam nec. Mauris et condimentum
				ligula. Vestibulum nec tortor quis urna dictum luctus. Cras quis
				suscipit metus. Ut dignissim ullamcorper aliquam. Donec condimentum eu
				tellus at interdum.
			</p>
			<p>
				Pellentesque pulvinar, justo eget tincidunt semper, augue massa placerat
				enim, non tempus quam erat eu orci. Suspendisse auctor consectetur
				lectus, a mattis odio. Pellentesque id sem sit amet justo fringilla
				bibendum id sit amet quam. Vivamus ex est, ultrices non pharetra eu,
				facilisis nec quam. Etiam molestie sed orci sed suscipit. Donec ipsum
				est, venenatis ut nisl ut, viverra auctor diam. Cras vestibulum lacus
				vel nunc dapibus aliquam. Aliquam accumsan lorem rhoncus tortor rhoncus,
				ut euismod sapien ullamcorper. Vivamus et dictum lacus, eu pellentesque
				dolor. Suspendisse potenti. Mauris vitae volutpat odio. Duis vitae purus
				nec enim posuere efficitur at vitae nisl. Etiam enim nisl, rutrum in
				vestibulum nec, dapibus ut dui. Pellentesque imperdiet molestie ante
				quis feugiat. Sed nec felis congue, cursus ligula eget, bibendum est.
				Proin mattis, tortor non lobortis lobortis, nibh quam aliquam neque, sed
				tristique nibh ex aliquet felis. Phasellus non augue ac ante efficitur
				consectetur at at est. Pellentesque habitant morbi tristique senectus et
				netus et malesuada fames ac turpis egestas. Nullam dui enim, iaculis et
				felis ac, porta ullamcorper justo. Suspendisse potenti.
			</p>
			<p>
				Nam eros tellus, hendrerit ut rhoncus sed, aliquet et felis. Cras a ex
				malesuada, fringilla magna elementum, cursus purus. Etiam fringilla leo
				non diam congue tempor. Ut laoreet, est eget blandit congue, mauris
				magna cursus sapien, dictum tempus sapien diam et dolor. Vestibulum vel
				egestas velit. Pellentesque vel consectetur urna, eu consequat odio. Sed
				ac pretium magna, ut ultrices tortor.
			</p>
			<p>
				Nulla dignissim pellentesque magna ac maximus. Integer id tincidunt
				erat. Sed elementum posuere augue, quis pharetra mi vehicula in. Nullam
				rhoncus mi quis lectus gravida dignissim. Pellentesque a tortor ut leo
				pretium auctor non in massa. Nunc efficitur vestibulum mi, id mattis
				quam aliquet id. Ut semper tortor sit amet molestie mattis. Pellentesque
				habitant morbi tristique senectus et netus et malesuada fames ac turpis
				egestas. Donec laoreet eleifend purus ut sagittis. Nunc consequat vel
				sapien at convallis. Maecenas sollicitudin quis justo non varius.
			</p>
		</section>
	</body>
</html>
